<template>
    <div class="left-detail">
        <div class="content">

            <p>TOOL-CASE</p>

            <div class="item">
                <span class="title">MEMO：</span>
                <q-progress class="progress" :percentage="memo" color="info" stripe/>
            </div>


        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import os from "os";

  /**
   * @author 白雨浓
   * @date 2019/1/10 10:08
   *
   * 左侧详情
   **/
  export default {
    name: 'LeftDetail',
    data() {
      return {
        end: false,
        cpu: 0,
        memo: 0
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.loadOsData();
      })
    },
    methods: {
      loadOsData() {
        this.memo = 100 - Math.floor(os.freemem() / os.totalmem() * 100);

        if (!this.end) {
          setTimeout(() => this.loadOsData(), 2000);
        }
      },
    },
    beforeRouteLeave() {
      this.end = true;
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .left-detail {
        display flex
        align-items center
        height calc(100vh - 30px)
        text-align center
    }

    .content {
        width 100%
    }

    .item {
        width 90%
        margin 30px auto
        text-align left
    }

    .title {
        height 30px
        line-height 30px
        font-size .8em
    }

    .progress {
        display block
        height 10px !important
    }
</style>
